<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/feedback.css" />
		<link rel="stylesheet" type="text/css" href="../css/mgPublic.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mggj.css"/>
		<style type="text/css">
			html,body{background-color:#F5F5F5}.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:#F5F5F5}.mui-pages{top:44px;height:auto}.mui-scroll-wrapper,.mui-scroll{background-color:#f5f5f5}.mui-page.mui-transitioning{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.mui-page-left{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-ios .mui-page-left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}.mui-navbar{position:fixed;right:0;left:0;z-index:10;height:44px;background-color:#f7f7f8}.mui-navbar .mui-bar{position:absolute;background:transparent;text-align:center}.mui-android .mui-navbar-inner.mui-navbar-left{opacity:0}.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-right{opacity:0}.mui-navbar .mui-btn-nav{-webkit-transition:none;transition:none;-webkit-transition-duration:.0s;transition-duration:.0s}.mui-navbar .mui-bar .mui-title{display:inline-block;width:auto}.mui-page-shadow{position:absolute;right:100%;top:0;width:16px;height:100%;z-index:-1;content:''}.mui-page-shadow{background:-webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%);background:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%)}.mui-navbar-inner.mui-transitioning,.mui-navbar-inner .mui-transitioning{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease}.mui-page{display:none}.mui-pages .mui-page{display:block}.mui-page .mui-table-view:first-child{margin-top:15px}.mui-page .mui-table-view:last-child{margin-bottom:30px}.mui-table-view{margin-top:20px}.mui-table-view span.mui-pull-right{color:#999}.mui-table-view-divider{background-color:#F5F5F5;font-size:14px}.mui-table-view-divider:before,.mui-table-view-divider:after{height:0}.head{height:40px}#head{line-height:40px}.head-img{width:40px;height:40px}#head-img1{position:absolute;bottom:10px;right:40px;width:40px;height:40px}.update{font-style:normal;color:#999;margin-right:-25px;font-size:15px}.mui-fullscreen{position:fixed;z-index:20;background-color:#000}.mui-ios .mui-navbar .mui-bar .mui-title{position:static}
		</style>
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="personalDataApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="personalData" class="mui-page form">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">个人资料</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper form_detail_box">
					<div class="mui-scroll">
							<ul class="mui-table-view head_tab_view">
								<li class="mui-table-view-cell you_small_img">
									<a id="head" class="mui-navigate-right">头像
										<span class="mui-pull-right head">
											<img class="head-img mui-action-preview" id="head-img-1" src=""/>
											<input type="file" accept="image/*" name="" id="" value="" />
										</span>
									</a>
								</li>
							</ul>
							<ul class="mui-table-view sel_a_cls">
								<li class="mui-table-view-cell">
								 	<span>个性签名：</span>
								 	<a href="##"class="mui-navigate-right">
								 		<input type="text" required="true" class="mui-input-clear" placeholder="这家伙很懒..." id="personal_sig" readonly="readonly">
								 	</a>
								 </li>
								 <li class="mui-table-view-cell">
								 	<span>昵称：</span>
								 	<a href="##"class="mui-navigate-right">
								 		<input type="text" required="true" class="mui-input-clear" placeholder="匿名" id="you_name" readonly="readonly">
								 	</a>
								 </li>
						         <li class="mui-table-view-cell">
						         	<span>性别：</span>
						         	<a href="#you_sex_sel"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="女" id="you_sex" readonly="readonly">
						         	</a>
						         </li>
						         <li class="mui-table-view-cell">
						         	<span>二维码名片：</span>
						         	<a href="##"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="" id="business_card" readonly="readonly">
						         	</a>
						         </li>						        
						         <li class="mui-table-view-cell forward_right">
						         	<span>从事行业：</span>
						         	<a href="##"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="IT" id="you_company" readonly="readonly">
						         	</a>
						         </li>
						         <li class="mui-table-view-cell">
						         	<span>住址：</span>
						         	<a href="##"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="广州市天河区" id="you_address" readonly="readonly" >
						         	</a>
						         </li>
						         <li class="mui-table-view-cell">
						         	<span>兴趣：</span>
						         	<a href="##"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="忘了" id="interest" readonly="readonly">
						         	</a>
						         </li>
						         <li class="mui-table-view-cell">
						         	<span>所在公司：</span>
						         	<a href="##"class="mui-navigate-right">
						         		<input type="text" required="true" class="mui-input-clear" placeholder="XXX科技公司" id="where_company" readonly="readonly">
						         	</a></li>
							</ul>
					</div>
				</div>
			</div>
		</div>
		<!--单页面结束-->
		
		
		<div id="you_sex_sel" class="mui-popover mui-popover-action mui-popover-bottom">
			<h1 class="mui-text-center layer_head">请选择你的性别</h1>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">男</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">女</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">保密</a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.11.2.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.view.js" type="text/javascript" charset="utf-8"></script>
	</body>
<script>
mui.init();
//初始化单页view
	var viewApi = mui('#personalDataApp').view({
		defaultPage: '#personalData'
	});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();
var view = viewApi.view;
(function($,doc) {
	//处理view的后退与webview后退
	var oldBack = $.back;
	$.back = function() {
		//如果view可以后退，则执行view的后退
		if (viewApi.canBack()) {
			viewApi.back();
		//执行webview后退
		} else {
			oldBack();
		};
	};
//弹出框选择
	mui('body').on('tap', '.mui-popover-action li>a', function() {
	var a = this,
		parent;
	//根据点击按钮，反推当前是哪个菜单
	for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
		if(parent.id){
			switch(parent.id){
			case "blood_type_sel":
			document.querySelector("#blood_type").value =a.innerHTML;
			break;
			case "you_evo_sel":
			document.querySelector("#you_evo").value =a.innerHTML;
			break;
			case "you_sex_sel":
			document.querySelector("#you_sex").value =a.innerHTML;
			break;
			default:
			break
			}; 
			//关闭菜单
			mui('#' + parent.id).popover('toggle');
		};
	};
	
});
$.ready(function(){
	//三级联示例
	var cityPicker3 = new $.PopPicker({
		layer: 3
	});
	cityPicker3.setData(cityData3);
	var showCityPickerButton = doc.getElementById('you_address');
	//var cityResult3 = doc.getElementById('cityResult3');
	showCityPickerButton.addEventListener('tap', function(event) {
		var _this=this;
		cityPicker3.show(function(items) {
			_this.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
			//返回 false 可以阻止选择框的关闭
			//return false;
		});
	}, false);
	});
})(mui,document);
//更换头像
setTimeout(function () {
	defaultImg();
	setTimeout(function() {
		initImgPreview();
	}, 300);
},500);
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
	if(mui.os.plus){
		var a = [{
			title: "拍照"
		}, {
			title: "从手机相册选择"
		}];
		plus.nativeUI.actionSheet({
			title: "修改头像",
			cancel: "取消",
			buttons: a
		}, function(b) {
			switch (b.index) {
				case 0:
					break;
				case 1:
					getImage();
					break;
				case 2:
					galleryImg();
					break;
				default:
					break
			}
		})	
	}
	
});

function getImage() {
	var c = plus.camera.getCamera();
	c.captureImage(function(e) {
		plus.io.resolveLocalFileSystemURL(e, function(entry) {
			var s = entry.toLocalURL() + "?version=" + new Date().getTime();
			console.log(s);
			//document.getElementById("head-img").src = s;
			document.getElementById("head-img-1").src = s;
			//变更大图预览的src
			//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
			document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
		}, function(e) {
			console.log("读取拍照文件错误：" + e.message);
		});
	}, function(s) {
		console.log("error" + s);
	}, {
		filename: "_doc/head.jpg"
	})
}

function galleryImg() {
	plus.gallery.pick(function(a) {
		plus.io.resolveLocalFileSystemURL(a, function(entry) {
			plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
				root.getFile("head.jpg", {}, function(file) {
					//文件已存在
					file.remove(function() {
						console.log("file remove success");
						entry.copyTo(root, 'head.jpg', function(e) {
								var e = e.fullPath + "?version=" + new Date().getTime();
								//document.getElementById("head-img").src = e;
								document.getElementById("head-img-1").src = e;
								//变更大图预览的src
								//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
								document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
							},
							function(e) {
								console.log('copy image fail:' + e.message);
							});
					}, function() {
						console.log("delete image fail:" + e.message);
					});
				}, function() {
					//文件不存在
					entry.copyTo(root, 'head.jpg', function(e) {
							var path = e.fullPath + "?version=" + new Date().getTime();
							//document.getElementById("head-img").src = path;
							document.getElementById("head-img-1").src = path;
							//变更大图预览的src
							//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
							document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
						},
						function(e) {
							console.log('copy image fail:' + e.message);
						});
				});
			}, function(e) {
				console.log("get _www folder fail");
			})
		}, function(e) {
			console.log("读取拍照文件错误：" + e.message);
		});
	}, function(a) {}, {
		filter: "image"
	})
};

function defaultImg() {
	if(mui.os.plus){
		plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
			var s = entry.fullPath + "?version=" + new Date().getTime();;
			//document.getElementById("head-img").src = s;
			document.getElementById("head-img-1").src = s;
		}, function(e) {
			//document.getElementById("head-img").src = '../images/logo.png';
			document.getElementById("head-img-1").src = '../images/logo.png';
		})
	}else{
		//document.getElementById("head-img").src = '../images/logo.png';
		document.getElementById("head-img-1").src = '../images/logo.png';
	}
	
}
document.getElementById("head-img-1").addEventListener('tap', function(e) {
	e.stopPropagation();
});

function initImgPreview() {
	var imgs = document.querySelectorAll("img.mui-action-preview");
	imgs = mui.slice.call(imgs);
	if (imgs && imgs.length > 0) {
		var slider = document.createElement("div");
		slider.setAttribute("id", "__mui-imageview__");
		slider.classList.add("mui-slider");
		slider.classList.add("mui-fullscreen");
		slider.style.display = "none";
		slider.addEventListener("tap", function() {
			slider.style.display = "none";
		});
		slider.addEventListener("touchmove", function(event) {
			event.preventDefault();
		})
		var slider_group = document.createElement("div");
		slider_group.setAttribute("id", "__mui-imageview__group");
		slider_group.classList.add("mui-slider-group");
		imgs.forEach(function(value, index, array) {
			//给图片添加点击事件，触发预览显示；
			value.addEventListener('tap', function() {
				slider.style.display = "block";
				_slider.refresh();
				_slider.gotoItem(index, 0);
			});
			var item = document.createElement("div");
			item.classList.add("mui-slider-item");
			var a = document.createElement("a");
			var img = document.createElement("img");
			img.setAttribute("src", value.src);
			a.appendChild(img);
			item.appendChild(a);
			slider_group.appendChild(item);
		});
		slider.appendChild(slider_group);
		document.body.appendChild(slider);
		var _slider = mui(slider).slider();
	}
}

if(mui.os.stream){
	document.getElementById("check_update").display = "none";
}
//个性签名
document.getElementById("personal_sig").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		
		mui.prompt(' ', theVal, '请输入您的签名', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		});
	});
//修改昵称
document.getElementById("you_name").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		
		mui.prompt(' ', theVal, '请输入新昵称', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		});
	});
//输入真实姓名
document.getElementById("interest").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		mui.prompt(' ', theVal, '请输入您的兴趣', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		})
	});
//输入家族住址
document.getElementById("where_company").addEventListener('tap', function(e) {
		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
		var btnArray = ['取消', '确定'];
		var theVal=this.value;
		var _this=this;
		mui.prompt(' ', theVal, '请输入您所在公司', btnArray, function(e) {
			if (e.index == 1) {
				_this.value = e.value;
			} else {
				_this.value = theVal;
			}
		})
	});
//输入职业
document.getElementById("you_company").addEventListener('tap', function(e) {
	e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
	var btnArray = ['取消', '确定'];
	var theVal=this.value;
	var _this=this;
	mui.prompt(' ', theVal, '请输入您的行业', btnArray, function(e) {
		if (e.index == 1) {
			_this.value = e.value;
		} else {
			_this.value = theVal;
		}
	})
});
</script>
</html>